<template>
  <view>
    <u-sticky bgColor="#fff">
      <view>
        <u-tabs :list="list2" line-color="#72b093" @change="changeTab"></u-tabs>
      </view>
    </u-sticky>
    <view class="flex-col p-12 gap-12">
      <view class="shadow-card" id="GoodDegreeSurprise">
        <GoodDegreeSurprise @change="changeComment"></GoodDegreeSurprise>
      </view>
      <z-paging
        ref="paging"
        v-model="commentList"
        @query="queryList"
        :use-page-scroll="true"
        :auto-scroll-to-top-when-reload="false"
        :auto-clean-list-when-reload="false"
      >
        <view class="shadow-card" v-for="item in commentList">
          <EvaluateItem></EvaluateItem>
          <view class="flex justify-end gap-12 mt-16">
            <button open-type="share" class="u-reset-button m-0">
              <u-icon
                name="share"
                size="36rpx"
                color="#333"
                label="分享"
                label-size="28rpx"
              ></u-icon>
            </button>
            <u-icon
              name="thumb-up"
              size="36rpx"
              color="#333"
              label="点赞"
              label-size="28rpx"
              v-if="true"
            ></u-icon>
            <u-icon
              v-else
              name="thumb-up-fill"
              size="36rpx"
              color="#e3a53b"
            ></u-icon>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import EvaluateItem from "@/subpages/components/evaluateItem/index.vue";
import GoodDegreeSurprise from "@/subpages/components/goodDegreeSurprise/index.vue";

export default {
  components: { GoodDegreeSurprise, EvaluateItem },
  data() {
    return {
      commentList: [],
      radios: [
        {
          label: "发货速度快(9739)",
          checked: false,
        },
        {
          label: "价格实惠(9739)",
          checked: false,
        },
        {
          label: "品质惊艳(9739)",
          checked: false,
        },
        {
          label: "质量杠杠的(9739)",
          checked: false,
        },
        {
          label: "性价比高(9739)",
          checked: false,
        },
      ],
      list2: [
        {
          name: "全部",
        },
        {
          name: "视频/图片",
          badge: {
            value: 256,
            numberType: "limit",
          },
        },
      ],
      showTag: false,
    };
  },
  methods: {
    changeTab(item) {
      console.log(item);
    },
    changeComment(name) {
      console.log(name);
    },
    queryList(pageNo, pageSize) {
      const data = Array.from({ length: 10 }).map((item) => ({
        id: Math.random(),
        img: "https://qxt-oss.yummall.cn/1762452183367946240/image/m1cwqwz1-8ugkx4x0r.jpg",
      }));
      setTimeout(() => {
        // data
        this.$refs.paging?.complete(data);
      }, 1000);
    },
  },
  mounted() {},
};
</script>
<style>
page {
  background-color: #f6f7f9;
}
</style>
<style lang="scss" scoped>
.shadow-card {
  padding: 24rpx;
  border-radius: 24rpx;
  background: white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
</style>
